<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 头部布局 -->
        <tree-tools :tree-data="componany" @addDept="addDept" />
        <!-- 组织架构 -->
        <!-- el-tree  data属性表示数据； props 表示展示规则； props={ title:'文字显示字段',child:'子级所在字段' } -->
        <el-tree :data="departs" :props="defaultProps">
          <tree-tools
            slot-scope="{data}"
            :tree-data="data"
            :is-root="false"
            @update="initData"
            @addDept="addDept"
            @editDept="editDept"
          />
        </el-tree>
      </el-card>
    </div>

    <!-- 弹框 -->
    <AddDept ref="addDept" :node-data="nodeData" />

  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartmentListData } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: { treeTools, AddDept },
  data() {
    return {
      // 【列表功能】 1. data定义变量
      departs: [],
      defaultProps: {
        label: 'name'
      },
      componany: {
        name: '',
        manager: '负责人',
        id: ''
      },
      // 点击行的数据
      nodeData: null
    }
  },
  created() {
    // 【列表功能】 3. created调用
    this.initData()
  },
  methods: {
    // 【列表功能】 2. methods定义方法
    async initData() {
      // 2.1 导入请求方法，发送请求
      const { depts, companyName } = await getDepartmentListData()
      // 2.2 赋值变量
      this.departs = tranListToTreeData(depts, '')
      this.componany.name = companyName
    },
    // 添加子部门
    addDept(val) {
      // 弹框打开，找到子组件的isShow 变为true即可
      // this.isShow = true
      this.$refs.addDept.isShow = true
      // 记住是给谁添加子部门
      this.nodeData = val
    },
    // 编辑部门
    async editDept(val) {
      // 获取改行的数据信息
      // console.log(1111)
      await this.$refs.addDept.getDepartmentInfo(val.id)
      // 弹框打开
      this.$refs.addDept.isShow = true
      // 保存改行数据
      this.nodeData = val
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
